export const metadata = {
  description: "Get started building a simple front-end app with Jazz in 10 minutes."
};
import { Alert, CodeGroup, ContentByFramework, FileName, JazzLogo, ReactLogo, SvelteLogo, TabbedCodeGroup, TabbedCodeGroupItem, TextLink } from "@/components/forMdx";

import GetAPIKey from "@/components/docs/snippets/GetAPIKey.mdx";
import InstallJazz from "@/components/docs/snippets/InstallJazz.mdx";
import RunDevServer from "@/components/docs/snippets/RunDevServer.mdx";
import StuckCTA from "@/components/docs/snippets/StuckCTA.mdx";

# Get started with <span className="sr-only">Jazz</span> <JazzLogo className="h-[41px] -ml-0.5 -mt-[3px] inline" /> in 10 minutes
This quickstart guide will take you from an empty project to a working app with a simple data model and components to create and display your data.

## Create your App

<ContentByFramework framework="react">
  We'll be using Next.js for this guide per the [React team's recommendation](https://react.dev/learn/creating-a-react-app), but Jazz works great with vanilla React and other full-stack frameworks too.

  You can accept the defaults for all the questions, or customise the project as you like.

  <TabbedCodeGroup id="create-react-app" default="pnpm" savedPreferenceKey="package-manager">
  <TabbedCodeGroupItem label="npm">
  ```sh
  npx create-next-app@latest --typescript jazzfest
  cd jazzfest
  ```
  </TabbedCodeGroupItem>
  <TabbedCodeGroupItem label="pnpm">
  ```sh
  pnpx create-next-app@latest --typescript jazzfest
  cd jazzfest
  ```
  </TabbedCodeGroupItem>
  </TabbedCodeGroup>

</ContentByFramework>
<ContentByFramework framework="svelte">
  We'll be using SvelteKit for this guide, per the [Svelte team's recommendation](https://svelte.dev/docs/svelte/getting-started), but Jazz works great with vanilla Svelte too.

  You can accept the defaults for all the questions, or customise the project as you like.

  <TabbedCodeGroup default="pnpm" savedPreferenceKey="package-manager" id="create-svelte-app">
  <TabbedCodeGroupItem label="npm">
  ```sh
  npx sv create --types ts --template minimal jazzfest
  cd jazzfest
  ```
  </TabbedCodeGroupItem>
  <TabbedCodeGroupItem label="pnpm">
  ```sh
  pnpx sv create --types ts --template minimal jazzfest
  cd jazzfest
  ```
  </TabbedCodeGroupItem>
  </TabbedCodeGroup>
</ContentByFramework>
**Note: Requires Node.js 20+**

## Install Jazz

The `jazz-tools` package includes everything you're going to need to build your first Jazz app.

<InstallJazz />

## Get your free API key

<GetAPIKey />

## Define your schema
Jazz uses Zod for more simple data types (like strings, numbers, booleans), and its own schemas to create collaborative data structures known as CoValues.  CoValues are automatically persisted across your devices and the cloud and synced in real-time. Here we're defining a schema made up of both Zod types and CoValues.

Adding a `root` to the user's account gives us a container that can be used to keep a track of all the data a user might need to use the app. The migration runs when the user logs in, and ensures the account is properly set up before we try to use it.

<ContentByFramework framework="react">
  <FileName>app/schema.ts</FileName>
</ContentByFramework>
<ContentByFramework framework="svelte">
<FileName>src/lib/schema.ts</FileName>
</ContentByFramework>

<CodeGroup preferWrap>
```ts quickstart/schema.ts
```
</CodeGroup>

## Add the Jazz Provider
Wrap your app with a provider so components can use Jazz.

<ContentByFramework framework="react">
  <FileName>app/components/JazzWrapper.tsx</FileName>
<CodeGroup preferWrap>
```tsx quickstart/JazzWrapper.tsx
```
</CodeGroup>
</ContentByFramework>
<ContentByFramework framework="react">
  <FileName>app/layout.tsx</FileName>
</ContentByFramework>
<ContentByFramework framework="svelte">
  <FileName>src/routes/+layout.svelte</FileName>
</ContentByFramework>

<TabbedCodeGroup id="jazz-provider" savedPreferenceKey="framework">
<TabbedCodeGroupItem label="React" value="react" icon={<ReactLogo />} preferWrap>
  ```tsx quickstart/layout.tsx
  ```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem label="Svelte" value="svelte" icon={<SvelteLogo />} preferWrap>
```svelte quickstart/+layout.svelte
```
</TabbedCodeGroupItem>
</TabbedCodeGroup>

## Start your app
Moment of truth&hairsp;—&hairsp;time to start your app and see if it works.

<RunDevServer />

<ContentByFramework framework="react">
If everything's going according to plan, you should see the default Next.js welcome page!
</ContentByFramework>
<ContentByFramework framework="svelte">
If everything's going according to plan, you should see the default SvelteKit welcome page!
</ContentByFramework>

### Not loading?

If you're not seeing the welcome page:

<ContentByFramework framework="react">
- Check you wrapped your app with the Jazz Provider in `app/layout.tsx`
- Check your schema is properly defined in `app/schema.ts`
</ContentByFramework>
<ContentByFramework framework="svelte">
- Check you wrapped your app with the Jazz Provider in `src/routes/+layout.svelte`
- Check your schema is properly defined in `src/lib/schema.ts`
</ContentByFramework>

<StuckCTA />

## Create data
Let's create a simple form to add a new band to the festival. We'll use the `useAccount` hook to get the current account and tell Jazz to load the `myFestival` CoValue by passing a `resolve` query.

<ContentByFramework framework="react">
  <FileName>app/components/NewBand.tsx</FileName>
</ContentByFramework>
<ContentByFramework framework="svelte">
  <FileName>src/lib/components/NewBand.svelte</FileName>
</ContentByFramework>

<TabbedCodeGroup id="new-band-component" default="react" savedPreferenceKey="framework"
>
<TabbedCodeGroupItem label="React" value="react" icon={<ReactLogo />} preferWrap>
```tsx quickstart/NewBand.tsx
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem label="Svelte" value="svelte" icon={<SvelteLogo />} preferWrap>
```svelte quickstart/NewBand.svelte
```
</TabbedCodeGroupItem>
</TabbedCodeGroup>

## Display your data
Now we've got a way to create data, so let's add a component to display it.

<ContentByFramework framework="react">
  <FileName>app/components/Festival.tsx</FileName>
</ContentByFramework>
<ContentByFramework framework="svelte">
  <FileName>src/lib/components/Festival.svelte</FileName>
</ContentByFramework>

<TabbedCodeGroup id="my-festival-component" default="react" savedPreferenceKey="framework">
<TabbedCodeGroupItem icon={<ReactLogo />} label="React" value="react" preferWrap>
```tsx quickstart/Festival.tsx
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem icon={<SvelteLogo />} label="Svelte" value="svelte" preferWrap>
```svelte quickstart/Festival.svelte
```
</TabbedCodeGroupItem>
</TabbedCodeGroup>

## Put it all together
You've built all your components, time to put them together.

<ContentByFramework framework="react">
  <FileName>app/page.tsx</FileName>
</ContentByFramework>
<ContentByFramework framework="svelte">
  <FileName>src/routes/+page.svelte</FileName>
</ContentByFramework>

<TabbedCodeGroup id="home-page" default="react" savedPreferenceKey="framework">
<TabbedCodeGroupItem label="React" value="react" icon={<ReactLogo />} preferWrap>
```tsx quickstart/page.tsx
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem icon={<SvelteLogo />} label="Svelte" value="svelte" preferWrap>
```svelte quickstart/+page.svelte
```
</TabbedCodeGroupItem>
</TabbedCodeGroup>

You should now be able to add a band to your festival, and see it appear in the list!

**Congratulations! 🎉** You've built your first Jazz app!

You've begun to scratch the surface of what's possible with Jazz. Behind the scenes, your local-first JazzFest app is **already** securely syncing your data to the cloud in real-time, ready for you to build more and more powerful features.

<ContentByFramework framework="react">
Psst! Got a few more minutes and want to add Server Side Rendering to your app? [We've got you covered!](/docs/server-side/ssr)
</ContentByFramework>

## Next steps
- [Add authentication](/docs/key-features/authentication/quickstart) to your app so that you can log in and view your data wherever you are!
- Dive deeper into the collaborative data structures we call [CoValues](/docs/core-concepts/covalues/overview)
- Learn how to share and [collaborate on data](/docs/permissions-and-sharing/overview) using groups and permissions
- Complete the [server-side quickstart](/docs/server-side/quickstart) to learn more about Jazz on the server
